<template>
	<div id="search_result">
		<!-- 搜索結果頁面 -->
		<sousuonav :classle="'icon-xiangzuojiantou'" :showle="false" :bgcolorA="'#e93323'" :bgcolorB="'#ffffff'"
			:push="'/assort'" :color="'#ffffff'" :textri="'搜索'" :title="'点击搜索商品，店铺名称'" @search="search"
			@changa="changa(index)" :Texts="texts">
		</sousuonav>
		<Productlist :topshow="true" :list="list"></Productlist>
		<!-- 空 -->
		<kong :text="'暂无商品，快去搜索其他商品吧！'" :kongshow="kongshow"></kong>
		<!-- 空 -->

		<NavConter></NavConter>
	</div>
</template>

<script>
	import {
		gitsearchfor
	} from '@/api/home'
	import sousuonav from '@/components/topsousuonav.vue'
	import Productlist from '@/components/Product_list.vue'
	import kong from '@/components/kong.vue'
	import NavConter from '@/components/NavConter.vue'
	export default {
		data() {
			return {
				kongshow: true,
				Text: "",
				list: [],
				texts: ""
			}
		},
		components: {
			sousuonav,
			Productlist,
			kong,
			NavConter
		},
		created() {
			this.Text = String(this.$route.params.id)
			encodeURI(String(this.$route.params.id))
			gitsearchfor(encodeURI(String(this.$route.params.id))).then(res => {
				this.list = res.data.data.list
				if (this.list.length == 0) {
					this.kongshow = true
				} else {
					this.kongshow = false
				}
			})
		},
		methods: {
			// 搜索事件
			// index = 搜索框文字
			search(index) {
				this.texts = index
				this.$route.params.id = index
				let url = encodeURI(String(index))
				gitsearchfor(url).then(res => {
					this.list = res.data.data.list
					if (this.list.length == 0) {
						this.kongshow = true
					} else {
						this.kongshow = false
					}
				})
			},
			changa(index) {
				this.model = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#search_result {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-top: 44 * $width;
	}
</style>
